<template>
    <div class="app-container">

        <!--二级下拉列表-->
        <CatalogSelector v-show="!showSkuForm" @listenOnSelect="getSpuList" />

        <!--spu列表-->
        <div v-show=" !showSkuForm">
            <div style="margin-bottom:10px;">
                <el-button type="primary" icon="el-icon-plus" size="mini" @click="addSpu()">添加商品</el-button>
            </div>

            <el-table
                    v-loading="spuListLoading"
                    :data="spuList"
                    element-loading-text="数据正在加载......"
                    border
                    fit
                    highlight-current-row>
                <el-table-column align="center" label="序号" width="100">
                    <template slot-scope="scope">
                        {{ scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column label="商品id" width="100">
                    <template slot-scope="scope">
                        {{ scope.row.id }}
                    </template>
                </el-table-column>
                <el-table-column min-width="30"  label="默认图片">
                    <template slot-scope="scope">
                        <img :src="scope.row.mainImage" style="width: 70px;height: 50px"/>
                    </template>
                </el-table-column>
                <el-table-column label="商品名称">
                    <template slot-scope="scope">
                        <span>{{ scope.row.subtitle }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="商品价格">
                    <template slot-scope="scope">

                        <span>{{ scope.row.price }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="操作" width="200" align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" icon="el-icon-plus" @click="addSku(scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!--sku表单-->
        <SkuForm
                v-show="showSkuForm"
                ref="skuForm"
                :catalog-id="catalogId"
                :spu-id="selectedSpu.spuId"
                :spu-name="selectedSpu.productName"
                @listenOnSave="onSkuSave()"
                @listenOnClose="onSkuClose()"/>
    </div>
</template>

<script>
    import CatalogSelector from '@/views/baseinfo/CatalogSelector'
    import SkuForm from '@/views/baseinfo/SkuForm'

    export default {
        name:"SpuList",
        components: { CatalogSelector, SkuForm },

        data() {
            return {
                // spu所属分类
                catalogId: null,
                // spu列表数据
                spuList: null,
                spuListLoading: false,
                // sku表单显示
                showSkuForm: false,
                // 选中的spu
                selectedSpu: {
                    spuId: null,
                    productName: null
                }
            }
        },

        methods: {
            // 获取spu列表
            getSpuList(catalogId) {
                this.catalogId = catalogId
                // 查询数据
                this.spuListLoading = true
                this.axios.get("/admin/getSpuList/"+this.catalogId).then(response => {
                    this.spuList = response
                    this.spuListLoading = false
                })
            },

            // 选择三级分类确认
            confirmSelect() {
                if (!this.catalogId) {
                    this.$alert('请选择二级分类', '提示', {
                        confirmButtonText: '确定',
                        type: 'warning'
                    })
                    return false
                }
                return true
            },

            // 添加spu
            addSpu() {
                if (!this.confirmSelect()) {
                    return
                }
                this.$refs.skuForm.init(this.catalogId)
                this.showSkuForm = true
            },

            // 保存spu后刷新列表
            onSpuSave() {
                // 刷新Spu列表
                this.getSpuList(this.catalogId)

                // 隐藏表单
                this.showSpuForm = false
            },

            // 关闭spu表单
            onSpuClose() {
                // 隐藏表单
                this.showSpuForm = false
            },

            // 添加sku
            addSku(spuId) {
                // 初始化表单
                this.$refs.skuForm.load(spuId.id)

                // 显示表单
                this.showSkuForm = true
            },

            // 保存sku
            onSkuSave() {
                // 隐藏表单
                this.showSkuForm = false
            },

            // 关闭sku表单
            onSkuClose() {
                // 隐藏表单
                this.showSkuForm = false
            }

        }
    }
</script>
